<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      width: 500px;
      text-align: center;
      margin: 50px auto;
    }

    form {
      border: 1px solid #333;
      padding: 20px;
      width: 300px;

      > label {
        display: block;
      }
    }
  </style>
</head>
<body>

  <form  id="addForm">
    <label>
      姓名: <input type="text"  class="name">
    </label>
    <label>
      成绩: <input type="text"  class="score">
    </label>
    <label>
      年龄: <input type="text" class="age">
    </label>
    <button>添加</button>
  </form>
  <button class="sort-btn">排序</button>
  <div>
    <button>上一页</button>
    <span>1 / 1</span>
    <button>下一页</button>
  </div>

  <table border="1" cellspacing="0">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>ID</th>
        <th>成绩</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody class="t-tobody">
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>1</td>
        <td>88</td>
        <td>18</td>
        <td>
          <button>修改</button>
          <button>删除</button>
        </td>
      </tr>
    </tbody>
  </table>

  <script>
    var list = [
      { id: 1, name: 'Jack', age: 18, score: 90 },
      { id: 2, name: 'Rose', age: 24, score: 65 },
      { id: 3, name: 'Tom', age: 20, score: 99 },
      { id: 4, name: 'Jerry', age: 22, score: 83 }
    ]
    var tbody = document.getElementsByTagName('tbody')[0]

    /* 需求:
      1. 根据 list 数组进行 table 表格的渲染
      2. 表单填写以后, 可以向表格内追加一条数据
      3. 点击每一条数据的删除按钮可以单独删除当前这一条数据
      4. 点击序号的时候, 可以根据序号进行表格排序( 升序和降序切换 )
      5. 点击年龄的时候, 可以根据年龄进行表格排序( 升序和降序切换 )
      6. 当 list 内超过 10 条的时候, 出现 上一页和下一页 的按钮, 并且可以点击切换
    */
    function getHtml(data,index){
      return `<tr>
                      <td>${index}</td>
                      <td>${data.name}</td>
                      <td>${data.id}</td>
                      <td>${data.score}</td>
                      <td>${data.age}</td>
                      <td>
                        <button>修改</button>
                        <button class="del-btn" data-id=${data.id}>删除</button>
                      </td>
                    </tr>`
    }
    function getlist(){
      let strHtml = ''
      list.forEach((item,index)=>{
          let str = getHtml(item,index+1)
          strHtml+= str
        })
      tbody.innerHTML = strHtml
    }
    getlist()
    const form = document.querySelector('form')
    const name = document.getElementsByClassName('name')[0].value
    const age = document.getElementsByClassName('age')[0].value
    const score = document.getElementsByClassName('score')[0].value
    form.onsubmit = function (e) {
      e.preventDefault()
      let data = {}
      data.name = name
      data.age = age
      data.score = score
      data.id = (Math.random()+'').slice(2)
      list.push(data)
      getlist() 
    }
    function del(id){
      console.log(id)
      const arr = list.filter(item=>{
        return item.id+'' !== id
      })
      list = arr
      getlist()
    }
    function sortList(){
      list.sort((a,b)=>{
        return a.age - b.age
      })
      console.log(list)
      getlist()
    }
    tbody.onclick = function(e){
      console.log(e.target)
      if(e.target.className === 'del-btn') del(e.target.dataset.id)
    }
    document.querySelector('.sort-btn').onclick = sortList
  </script>
</body>
</html>
